<template>
  <view class="swiper-container">
    <swiper class="swiper" autoplay circular :interval="3000" indicator-dots>
      <swiper-item v-for="item in swiperData" :key="item._id">
        <image class="banner-image" :src="item.image_src" mode="aspectFill" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义Props
defineProps({
  height: {
    type: String,
    default: '400rpx'
  }
});

// 轮播图数据
const swiperData = ref([
  { _id: '1', image_src: '/static/picture/swiper1.png' },
  { _id: '2', image_src: '/static/picture/swiper2.png' },
  { _id: '3', image_src: '/static/picture/swiper3.png' }
]);
</script>

<style lang="scss" scoped>
.swiper-container {
  padding: 0 20rpx;
  margin-top: 20rpx;

  .swiper {
    height: v-bind(height);
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.08);
    .banner-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>